<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/three.js"></script>
    <style>
        div#canvas-frame {
            border: none;
            cursor: pointer;
            width: 600px;
            height: 600px;
            background-color: #EEEEEE;
            margin: 0 auto;
        }
    </style>
</head>
<body>
</body>
<script>
    let renderer;
    const width = window.innerWidth;
    const height = window.innerHeight;

    function initThree() {
        renderer = new THREE.WebGLRenderer({
            antialias: true
        })
        renderer.setSize(width, height)
        document.body.appendChild(renderer.domElement)
        renderer.setClearColor(0xffffff, 1.0)
    }

    let camera;

    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000)
        camera.position.set(600, 0, 600)
        camera.up.set(0, 1, 0)
        camera.lookAt(0, 0, 0)
    }

    let scene;

    function initScene() {
        scene = new THREE.Scene();
    }

    let light;

    function initLight() {
        light = new THREE.DirectionalLight(0xff0000, 1)
        light.position.set(1, 0, 5)
        scene.add(light)
    }

    let cube;
    function initObject() {
        const geometry = new THREE.BoxGeometry(200, 100, 50, 4,4)
        const material = new THREE.MeshLambertMaterial({color:0xffffff})
        const mesh = new THREE.Mesh(geometry, material)
        mesh.position.set(0,0,0)
        const mesh1 = new THREE.Mesh(geometry, material)
        mesh1.position.set(-300, 0, 0)
        const mesh2 = new THREE.Mesh(geometry, material)
        mesh2.position.set(0, -150, 0)
        const mesh3 = new THREE.Mesh(geometry, material)
        mesh3.position.set(0, 150, 0)
        const mesh4 = new THREE.Mesh(geometry, material)
        mesh4.position.set(300, 0, 0)
        const mesh5 = new THREE.Mesh(geometry, material)
        mesh5.position.set(0, 0, -100)
        scene.add(mesh, mesh1)
    }
    function threeStart() {
        initThree()
        initCamera()
        initScene()
        initLight()
        initObject()
        window.scene = scene;
        animate();
    }
    function animate() {
        // renderer.clear();
        renderer.render(scene, camera)
        requestAnimationFrame(animate)
    }
    threeStart();
</script>
</html>